<template>
  <view class="box">
    <view class="header"></view>
    <view class="content">
      <u-form class="form" label-width="500px" :model="form" ref="uForm">
        <u-form-item class="form-item">
          <image class="user-icon" :src="require('@/static/image/login/user.png')"></image>
          <u-input focus type="number" v-model="form.phone" />
        </u-form-item>
        <u-form-item style="margin-top: 45rpx;padding-right: 0" class="form-item">
          <view  slot="right"><u-button @tap="getCode" ripple type="primary">{{tips}}</u-button></view>
          <image class="password-icon" :src="require('@/static/image/login/password.png')"></image>
          <u-input type="number" v-model="form.pcode" />
        </u-form-item>
        <view class="btn-box">
          <u-button @click="handleLogin" :ripple="false" class="custom-style" >登录</u-button>
        </view>
      </u-form>
    </view>
    <view class="protocol">
      <u-checkbox
          v-model="checked"
      >我已阅读并同意</u-checkbox><text @click="handleToProtocol">《用户隐私协议》</text>
    </view>
    <u-verification-code :seconds="seconds"  ref="uCode"
                         @change="codeChange"></u-verification-code>
  </view>
</template>

<script>
import {getCode} from "@/api";

export default {
  name: "login",
  data(){
    return{
      form:{
        phone:'',
        pcode:''
      },
      tips: '获取验证码',
      checked:true,
      // refCode: null,
      seconds: 60,
    }
  },
  methods:{
    getCode(){
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码',
            mask:true
          })
          getCode({
            phone:this.form.phone,
            type:1
          }).then(e=>{

            uni.showToast({
              title:e.data.msg,
              icon:'none'
            })
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
            uni.hideLoading();
          }).catch(e=>{

            uni.showToast({
              title:e.data.msg,
              icon:'none'
            })
          })

      } else {
        this.$u.toast('短信已发送！');
      }
    },
    handleLogin(){
      this.$store.dispatch('login',{
        ...this.form,
        userClient:uni.getSystemInfoSync().model
      }).then(()=>{

        this.$store.dispatch('handleChangeLogin',false)
        uni.showTabBar({
          success(){
            console.log('asd')
          }
        })
      }).catch(()=>{
        console.log('ccc')
      })
    },
    codeChange(text) {
      this.tips = text;
    },
    handleToProtocol(){
      uni.navigateTo({
        url:'/pages/index/protocol'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  touch-action: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #dbe8f4;
}
.header{
  height: 519rpx;
  width: 100%;
  background: url("../../static/image/login/login-header.png") 0/100% no-repeat;
}
.content{
  width: 650rpx;
  min-height: 40vh;
  background-color: #fff;
  border-radius: 50rpx;
  margin: -200rpx auto 0;
}
.form{
  padding: 60rpx 50rpx 0;
  .form-item{
    display: flex;
    justify-content: center;
    height: 90rpx;
    box-sizing: border-box;
    padding: 0 40rpx;
    background-color: #f1f1f1;
    border-radius: 10rpx;
  }
  .user-icon{
    width: 40rpx;
    height: 46rpx;
    margin-right: 20rpx;
  }
  .password-icon{
    width: 34rpx;
    height: 42rpx;
    margin-right: 20rpx;
  }
}
.btn-box{
  margin-top: 60rpx;
  .custom-style{
    background: linear-gradient(to right,#52C4F9,#5C69E3);
    border-radius: 50rpx;
    border: none !important;
    outline: none;
    color: #fff;
  }
}
.protocol{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50rpx;
  font-size: 28rpx;
}
::v-deep .u-checkbox__label{
  margin-right: 0;
}
</style>
